<script setup lang="ts">

import type { CommentList } from '../../typings';


const { list } = defineProps<{
    list: CommentList,
}>()





</script>

<template>
    <div class="comment-comp p-3 flex">

        <div class="img-div">
            <img  v-lazy="list.avatar"  class=" w-8 h-8 rounded-full" :src="list.avatar" alt="">
        </div>
        <div class="title-div flex flex-col ml-2 w-5/6">
            <span>
                {{ list.userName }}
            </span>
            <p>{{ list.time }}</p>
            <p class="text">{{ list.content }}</p>
        </div>

    </div>
</template>


<style lang="scss" scoped>
.comment-comp {
    .text {
        text-align: left;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
}
</style>